<!DOCTYPE html>
<html lang="en" >
<head>
	<meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"/>
    <meta name="keywords" content="" />
    <meta name="description" content="" />
    <meta content="yes" name="apple-mobile-web-app-capable" />
    <meta name="apple-mobile-web-app-status-bar-style" content="blank">
    <meta content="telephone=no" name="format-detection" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>充值</title>
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/common.css" />
    <link rel="stylesheet" href="./css/recharge.css">
    <link rel="stylesheet" href="./css/swiper-3.4.2.min.css">
    <script src="js/jquery-1.11.3.min.js"></script>
    <script src="js/flexible_css.js"></script>
    <script src="js/flexible.js"></script>

    <style>

    </style>

</head>
<body ontouchstart>

    <div class="wrap">
      <div class="head">充值</div>
      
      <div class="rechargeContent">
          <div class="levaeMoney">
             账户余额 <span>￥340.00</span>
          </div>
        <form action="">
          <div class="toRecharge">
             <span>充值金额</span><input onblur="clearNoNum(this)" onkeyup="clearNoNum(this)" id="recharge" type="number" placeholder="请输入充值金额" value="">
             <p class="only hide">可输入到x毛y分</p>
           </div>

          <div class="inputGroup">
              <input type="button" value="100.88">
              <input type="button" value="200.99">
              <input type="button" value="500.88">
              <br>
              <input type="button" value="1000.44">
              <input type="button" value="2000.66">
              <input type="button" value="500000.22">
          </div>

          <div class="typeRecharge">
               <span> 充值方式</span> 
               <div class="types">
                    <label><input name="Fruit" type="radio" value="1"  checked="checked" />银行卡 </label> 
                    <label><input name="Fruit" type="radio" value="2" />微信 </label> 
                    <label><input name="Fruit" type="radio" value="3" />支付宝 </label>
               </div>
           
         </div>
         <button id="submit">立即充值</button>
        </form>
      </div>

    </div>

    <script src="js/swiper-3.4.2.min.js"></script>
    <!-- //改之前
    <script>
        //点击6个快捷金额充值 将值处理放到input输入框中，并添加被选中样式
      $('.inputGroup input').click(function(){
          var dat = '.00'
          var theValue = this.value;
        //   console.log(theValue)
          var InputValue=theValue.slice(0,theValue.length-1);
        //   console.log(InputValue)
          $('#recharge').val(InputValue +dat);
          $(this).addClass('active').siblings().removeClass('active')
      })
      //当改变 输入改变input的值时，消除被选中样式
    $('#recharge').keyup(function(){
        $('.inputGroup input').removeClass('active')
    })
    $("#recharge").focus(function(){
        $(this).css('border','1px solid #ff3737');
        $(this).parent().find('p').removeClass('hide');
    }).blur(function(){
        $(this).css('border','1px solid #ffa500');
        $(this).parent().find('p').addClass('hide');
    })
    //点击充值按钮获取充值方式选中状态的值
    $('#submit').click(()=>{
        var radios = $('.types input');
        var vv = $('.types label')
        for (let i = 0, length = radios.length; i < length; i++) {
            if (radios[i].checked) {
                alert(radios[i].value + vv[i].innerText );
                break;
            }
        }
    })
    </script> -->
    <script>
            //点击6个快捷金额充值 将值处理放到input输入框中，并添加被选中样式
          $('.inputGroup input').click(function(){
             
              var theValue = this.value;
              var InputValue=theValue;  
              $('#recharge').val(InputValue);
              $(this).addClass('active').siblings().removeClass('active')
          })
          //当改变 输入改变input的值时，消除被选中样式
        $('#recharge').keyup(function(){
            $('.inputGroup input').removeClass('active')
        })
        $("#recharge").focus(function(){
            $(this).css('border','1px solid #ff3737');
            $(this).parent().find('p').removeClass('hide');
        }).blur(function(){
            $(this).css('border','1px solid #ffa500');
            $(this).parent().find('p').addClass('hide');
        })
        //点击充值按钮获取充值方式选中状态的值
        $('#submit').click(()=>{
            var IputVal =  $('#recharge').val();
            var radios = $('.types input');
            var vv = $('.types label')
            for (let i = 0, length = radios.length; i < length; i++) {
                if (radios[i].checked) {
                    alert("充值金额:"+IputVal);
                    alert(radios[i].value + vv[i].innerText );
                    break;
                }
            }
        })
    </script>
    <script>
      //对输入金额进行处理
     function clearNoNum(obj){
		//修复第一个字符是小数点 的情况.
		if(obj.value !=''&& obj.value.substr(0,1) == '.'){
			obj.value="";
		}
		obj.value = obj.value.replace(/^0*(0\.|[1-9])/, '$1');//解决 粘贴不生效
		obj.value = obj.value.replace(/[^\d.]/g,"");  //清除“数字”和“.”以外的字符
		obj.value = obj.value.replace(/\.{2,}/g,"."); //只保留第一个. 清除多余的     
		obj.value = obj.value.replace(".","$#$").replace(/\./g,"").replace("$#$",".");    
		obj.value = obj.value.replace(/^(\-)*(\d+)\.(\d\d).*$/,'$1$2.$3');//只能输入两个小数     
		if(obj.value.indexOf(".")< 0 && obj.value !=""){//以上已经过滤，此处控制的是如果没有小数点，首位不能为类似于 01、02的金额
			if(obj.value.substr(0,1) == '0' && obj.value.length == 2){
				obj.value= obj.value.substr(1,obj.value.length);	
			}
		}    
	} 
    </script>
</body>
</html>
